package com.example.owl.ui.courses

import androidx.compose.foundation.*
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.BasicTextField
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Send
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.text.input.TextFieldValue
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.lifecycle.viewmodel.compose.viewModel
import com.example.owl.viewmodel.ChatViewModel
import com.example.owl.model.Message
import com.example.owl.ui.theme.BlueTheme

@Composable
fun ChatScreen(
    modifier: Modifier = Modifier
) {
    val viewModel: ChatViewModel = viewModel()
    val messages by viewModel.messages.collectAsState()
    var userInput by remember { mutableStateOf(TextFieldValue("")) }

    Column(
        modifier = modifier
            .background(MaterialTheme.colors.background)
            .statusBarsPadding()
            .fillMaxHeight()
    ) {
        TopAppBar(
            title = { Text("聊天机器人") },
            backgroundColor = MaterialTheme.colors.primary,
            contentColor = contentColorFor(MaterialTheme.colors.primary)
        )
        LazyColumn(
            modifier = Modifier
                .weight(1f)
                .fillMaxWidth()
                .padding(16.dp)
        ) {
            items(messages) { message ->
                if (message.isUser) {
                    UserMessage(message)
                } else {
                    BotMessage(message)
                }
            }
        }
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(horizontal = 16.dp, vertical = 8.dp),
            verticalAlignment = Alignment.CenterVertically
        ) {
            BasicTextField(
                value = userInput,
                onValueChange = { userInput = it },
                textStyle = MaterialTheme.typography.subtitle1.copy(
                    color = MaterialTheme.colors.onSurface
                ),
                maxLines = 1,
                cursorBrush = SolidColor(MaterialTheme.colors.primary),
                modifier = Modifier
                    .weight(1f)
                    .border(1.dp, MaterialTheme.colors.onSurface, RoundedCornerShape(8.dp))
                    .padding(8.dp)
            )
            IconButton(onClick = {
                if (userInput.text.isNotBlank()) {
                    viewModel.sendMessage(userInput.text)
                    userInput = TextFieldValue("") // 清空输入框
                }
            }) {
                Icon(Icons.Filled.Send, contentDescription = "Send", tint = MaterialTheme.colors.primary)
            }
        }
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(horizontal = 16.dp, vertical = 8.dp),
            horizontalArrangement = Arrangement.Center
        ) {
            Button(onClick = {
                viewModel.clearMessages()
            }) {
                Text("Clear")
            }
        }
    }
}

@Composable
fun UserMessage(message: Message) {
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .padding(8.dp),
        contentAlignment = Alignment.CenterEnd
    ) {
        Card(
            backgroundColor = MaterialTheme.colors.primary,
            shape = RoundedCornerShape(8.dp),
            modifier = Modifier.padding(4.dp)
        ) {
            Text(
                text = message.text,
                style = MaterialTheme.typography.body1,
                color = MaterialTheme.colors.onPrimary,
                modifier = Modifier.padding(8.dp)
            )
        }
    }
}

@Composable
fun BotMessage(message: Message) {
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .padding(8.dp),
        contentAlignment = Alignment.CenterStart
    ) {
        Card(
            backgroundColor = MaterialTheme.colors.secondary,
            shape = RoundedCornerShape(8.dp),
            modifier = Modifier.padding(4.dp)
        ) {
            Text(
                text = message.text,
                style = MaterialTheme.typography.body1,
                color = MaterialTheme.colors.onSecondary,
                modifier = Modifier.padding(8.dp)
            )
        }
    }
}

@Preview(name = "Chat Screen")
@Composable
private fun ChatScreenPreview() {
    BlueTheme {
        ChatScreen(Modifier)
    }
}
